<template>
    <main id="main" class="site-main karma-blog-page" role="main">
        <div class="container">
            <div class="row">
                <div class="karma-blog-content col-sm-9">
                    <article class="blog-grid margin-b-30 athena-blog-post reveal">
                        <div class="blog-grid-content">
                            <h3 class="blog-grid-title-lg">注册</h3>

                            <div class="login-content">
                                <div class="row">
                                    <div class="col-md-6 col-xs-12">
                                        <form class="margin-bottom-0" id="sendForm">
                                            <div class="form-group m-b-15">
                                                <input name="email" v-model="email" type="text" class="form-control" placeholder="账号"/>
                                            </div>
                                            <div class="form-group m-b-15">
                                                <input type="text" v-model="code" name="code" class="form-control"
                                                       placeholder="验证码"/>
                                            </div>
                                            <div class="form-group m-b-15 text-center">
                                                <input type="hidden" v-model="code_id" name="verify"
                                                       class="form-control" placeholder="验证码">
                                                <img id="verifyImg" class="" :src="img" @click="getCaptcha" alt="">
                                            </div>
                                            <div class="login-buttons">
                                                <a id="doSend" @click.prevent="register"
                                                   class="btn btn-info btn-block btn-lg">注册 <span
                                                        id="count"></span></a>
                                            </div>
                                            <div class="form-group m-b-15 text-center" style="margin-top: 5px">
                                                <span class="">已有账号?<a href="#login">去登录</a></span>
                                            </div>
                                            <div class="form-group m-b-15">
                                                <p id="showTip" class="input-lg text-center text-danger"></p>
                                            </div>
                                            <hr/>
                                        </form>
                                    </div>
                                    <div class="col-md-6 col-xs-12 text-center">
                                        <img src="https://yanghaha.vip/front/img/weixin.png">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </article>
                </div>
            </div>

        </div>

    </main>
</template>

<script>
    import BaseService from "@/services/BaseService";

    const BaseServiceApi = new BaseService();
    export default {
        name: "Register",
        data: function () {
            return {
                email: "",
                password: "",
                img: "",
                code_id: "",
                code: ""
            };
        },
        mounted: function () {
            this.getCaptcha();
        },
        methods: {
            getCaptcha: function () {
                BaseServiceApi.getApi("/api/v1/captcha").then(res => {
                    if (res.data.code === 200) {
                        this.img = res.data.img;
                        this.code_id = res.data.id;
                    }
                });
            },
            register: function () {
                let data = {
                    email: this.email,
                    password: this.password,
                    code: this.code,
                    code_id: this.code_id
                };
                console.log(data);
                BaseServiceApi.postApi("/api/v1/register", data).then(res => {
                    if (res.data.code === 200) {
                        window.location.href = "#activate/" + res.data.data.cipher + "/" + res.data.data.email;
                    } else {
                        this.msg = res.data.msg;
                        this.code = "";
                        this.getCaptcha();
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
